<template>
  <div>
    <div class="top">
      <div class="bgc">
        <div class="bgcUp">
          <div class="name">
            <h3>{{ data.nickname }}</h3>
            <p>{{ data.intro }}</p>
          </div>
          <div class="image" @click="$router.push('/info')">
            <!-- 系统返回的图片默认是找不到的,不要用到自定义指令 -->
            <img v-imgerror="defaultImg" :src="data.avatar" alt="" />
          </div>
        </div>
        <div class="bgcDown">
          <div>
            <h3>{{ data.submitNum }}</h3>
            <p>累计答题</p>
          </div>
          <div>
            <h3>{{ data.collectQuestions.length }}</h3>
            <p>收藏题目</p>
          </div>
          <div>
            <h3>{{ data.errorQuestions.length }}</h3>
            <p>我的错题</p>
          </div>
          <div>
            <h3>
              {{ (1 - data.errorNum / data.submitNum).toFixed(2) * 100 + '%' }}
            </h3>
            <p>正确率</p>
          </div>
        </div>
        <div class="router">
          <van-cell-group inset>
            <van-cell
              @click="$router.push('/editInfo?property=position')"
              title="我的岗位"
              :value="data.position"
            >
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <i
                  style="font-size: 22px"
                  class="iconfont iconicon_mine_gangwei"
                ></i>
                <span class="custom-title">我的岗位</span>
              </template>
              <!-- 使用 right-icon 插槽来自定义右侧图标 -->
              <template #right-icon>
                <van-icon name="arrow" />
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
    <div class="bottom">
      <div class="middle">
        <div class="title">
          <h4>面经数据</h4>
        </div>
        <div class="midContent">
          <div>
            <span
              >昨日阅读 <i>+{{ data.shareData.read.yesterday }}</i></span
            >
            <h2>{{ data.shareData.read.total }}</h2>
            <p>阅读总数</p>
          </div>
          <div>
            <span
              >昨日获赞 <i>+{{ data.shareData.star.yesterday }}</i></span
            >
            <h2>{{ data.shareData.star.total }}</h2>
            <p>获赞总数</p>
          </div>
          <div>
            <span
              >昨日新增 <i>+{{ data.shareData.comment.yesterday }}</i></span
            >
            <h2>{{ data.shareData.comment.total }}</h2>
            <p>评论总数</p>
          </div>
        </div>
        <div class="cell">
          <van-cell-group>
            <van-cell is-link value="21" :border="tem">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <i
                  style="font-size: 22px"
                  class="iconfont iconicon_mine_mianjing"
                ></i>
                <span class="custom-title">我的面经分享</span>
              </template>
            </van-cell>
            <van-cell to="message" is-link value="98" :border="tem">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <i
                  style="font-size: 22px"
                  class="iconfont iconicon_mine_xiaoxi"
                ></i>
                <span class="custom-title">我的消息</span>
              </template>
            </van-cell>
            <van-cell is-link value="29" :border="tem">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <i
                  style="font-size: 22px"
                  class="iconfont iconicon_mine_tikushoucang"
                ></i>
                <span class="custom-title">收藏的题库</span>
              </template>
            </van-cell>
            <van-cell is-link value="32" :border="tem">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <i
                  style="font-size: 22px"
                  class="iconfont iconicon_mine_qiyeshoucang"
                ></i>
                <span class="custom-title">收藏的企业</span>
              </template>
            </van-cell>
            <van-cell is-link value="123" :border="tem">
              <!-- 使用 title 插槽来自定义标题 -->
              <template #title>
                <i
                  style="font-size: 22px"
                  class="iconfont iconicon_mine_cuoti"
                ></i>
                <span class="custom-title">我的错题</span>
              </template>
            </van-cell>
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { userInfoAPI } from '@/api/personal'
export default {
  name: 'personalView',
  data () {
    return {
      tem: false,
      code: '',
      data: '',
      defaultImg: 'https://img1.baidu.com/it/u=1682079686,16321901&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=413'

    }
  },
  async created () {
    try {
      // const res = await getCodeAPI({ mobile: '18888881111' })
      // console.log(res)
      // this.code = res.data

      // 发送登录请求,拿到token
      // const res2 = await loginAPI({ mobile: '18888881111', code: this.code })
      // console.log(res2)

      // 将token存在本地存储
      // setToken(res2.data.jwt)

      const res3 = await userInfoAPI()
      this.data = res3.data
      this.$store.commit('personal/setData', res3.data)
      // console.log(res3)
      // console.log(this.data.shareData.comment)
      // console.log(this.data.shareData.read)
    } catch { }
  }
}
</script>

<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
}
.bgc {
  .router {
    margin-top: 26px;
    ::v-deep .van-cell {
      display: flex;
      align-items: center;
    }
    ::v-deep .van-cell {
      display: flex;
      align-items: center;
      .van-icon-arrow {
        margin-left: 10px;
      }
      .van-cell__title {
        display: flex;
        align-items: center;
        i {
          margin-right: 13px;
          // background-color: red;
        }
      }
    }
  }

  width: 100vw;
  height: 210px;
  background-color: #c5002f;
  padding-top: 8%;
  .bgcUp {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 20px;
    .name h3 {
      color: #fff;
    }
    p {
      color: #e8a4b4;
      font-size: 12px;
    }
    .image img {
      width: 45px;
      height: 45px;
      background-color: #fff;
      border: 4px solid #c7697e;
      margin-right: 20px;
      border-radius: 50%;
    }
  }
  .bgcDown {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    text-align: center;
    h3 {
      color: #fff;
      margin-bottom: 5px;
    }
    p {
      color: #e8a4b4;
      font-size: 12px;
    }
  }
}

.bottom {
  .cell {
    padding: 0 15px 40px;
    .van-cell {
      display: flex;
      align-items: center;
      //以下是控制cell里面的右图标i
      ::v-deep .van-cell__right-icon {
        // background-color: blue;
        margin-left: 10px;
      }
      // background-color: red;
      .van-cell__title {
        display: flex;
        align-items: center;
        i {
          margin-right: 13px;
          // background-color: red;
        }
      }
    }
    ::v-deep .van-cell__title {
      line-height: 40px;
    }
    ::v-deep .van-icon {
      color: #000;
    }
  }
  margin-bottom: 30px;

  .middle {
    .title {
      margin: 45px 0 0 20px;
    }
    .midContent {
      display: flex;
      justify-content: space-between;
      text-align: center;
      padding: 0 40px;
      margin-top: 20px;
      span,
      p {
        font-size: 14px;
      }
      span {
        color: #b4b6c0;
        i {
          color: #63b9d5;
          font-style: normal;
        }
      }
      h2 {
        margin: 7px 0;
      }
      p {
        color: #7a5e7b;
        margin-bottom: 30px;
      }
    }
  }
}
</style>
